<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件开发-全局局部组件</title>
</head>

<body>
    <div id="app">
        {{msg}}
        <register></register>
        <menu-Computer></menu-Computer>
        <login></login>
    </div>
    <!-- 菜单组件 -->
    <template id="menuTemplate">
        <div>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </div>
    </template>
</body>

</html>
<script type="module">
    import { } from './js/vue.js';
    //定义局部组件
    let register = {
        template: `<div>
            <h2>用户注册</h2>
            <login></login>
            <span>注册的局部组件</span>
            </div>`
    };
    //定义变量用来保存菜单组件
    let menuComputer = { template: "#menuTemplate" }; //使用自定义template标签选择器

    // 定义全局组件
    Vue.component("login",{template:`<div><h2>用户登录</h2></div>`})

    new Vue({
        el: '#app',
        data: {
            msg: 'hello vue'
        },
        methods: {
            // 自定义方法
        },
        computed: {
            // 计算属性
        },
        components: {
            // 局部组件
            register,
            menuComputer,
        }
    })
</script>